<template>
	<view class="cloud_album safe_area">
		<u-tabs :list="tabList" lineColor="#FF943C" :activeStyle="{
            color: '#FF943C',
        }" :inactiveStyle="{
            color: '#000000',fontSize:'14px'}" :scrollable="false" @click="handleclick"></u-tabs>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" :refresher-threshold="50" class="cloud_album_view"
			@scrolltolower="scrolltolower">
			<template v-if="params?.type === '1'">
				<!-- handlePreview -->
				<image :src="item?.url" @click="handlePreviewVideo(item)" v-for="(item,index) in dataSouse"
					:key="item?.id">
				</image>
				<u-empty v-if="!dataSouse.length" marginTop="100" text="暂无图片"
					icon="http://qianxueapplet.suoeryun.com/tp.png"></u-empty>
			</template>
			<template v-else>
				<video @click="handlePreviewVideo(item)" :src="item?.url" v-for="(item,index) in dataSouse"
					:key="item?.id" :controls="false" :show-center-play-btn="false">
				</video>
				<u-empty v-if="!dataSouse.length" marginTop="100" text="暂无视频"
					icon="http://qianxueapplet.suoeryun.com/sp.png"></u-empty>
			</template>
			<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
		</scroll-view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref, reactive, unref } from "vue";
	import { qxCloudMediaList } from '@/config/mine.api';
	import { onShow } from "@dcloudio/uni-app";

	const status = ref('loadmore');
	// 分页计数
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 15 });
	// 参数
	const params = ref({ type: '1' });
	const triggered = ref(false);
	const tabList = [{
		name: '图集',
		type: '1'
	}, {
		name: '视频集',
		type: '2'
	}];
	const dataSouse = ref([]);
	const scrollTop = ref(0);

	onMounted(async () => {
		pagination.pageNo = 1;
		triggered.value = false;
	})

	onShow(() => {
		loadData();
	})

	/**
	 * 加载数据
	 */
	async function loadData() {
		console.log(234);
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await qxCloudMediaList({ ...pagination, ...unref(params) });
		triggered.value = false;
		pagination.total = res?.total;
		dataSouse.value?.push(...res?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * tab 点击
	 * @param {Object} index
	 */
	function handleclick(item) {
		console.log(item, 'item');
		params.value.type = item?.type;
		pagination.pageNo = 1;
		loadData();
	}

	/**
	 * 图片预览
	 */
	function handlePreview(item) {
		// console.log(item?.url, dataSouse.value?.map(item => item?.url));
		// uni.previewImage({
		// 	urls: dataSouse.value?.map(item => item?.url),
		// 	count: item?.url,
		// 	indicator: 'default',
		// })
		console.log(dataSouse.value?.map(item => item?.url), 234);
		uni.$u.route({
			url: 'pages/mine/imagePreview',
			params: {
				// urls: dataSouse.value?.map(item => item?.url)?.join(',')
				...unref(params)
			}
		})
	}

	/**
	 * 视频预览
	 */
	function handlePreviewVideo(item) {
		uni.$u.route({
			url: 'pages/mine/videoPreview',
			params: {
				...item
			}
		})
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower(e) {
		console.log(e, 'lower', unref(dataSouse)?.length !== pagination.total, unref(dataSouse)?.length, pagination.total);
		if (unref(dataSouse)?.length < pagination.total) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		pagination.pageNo = 1;
		loadData();
	}
</script>

<style lang="scss" scoped>
	.cloud_album {

		::v-deep .u-tabs {
			background-color: #fff;
		}

		.cloud_album_view {
			margin: 20rpx 24rpx 20rpx 16rpx;
			height: calc(100vh - 63px);

			image,
			video {
				width: 30.1%;
				margin-left: 14rpx;
				// width: 170rpx;
				height: 226rpx;
				object-fit: contain;
				margin-bottom: 12rpx;
			}
		}
	}
</style>